@charset "utf-8"; //设置字符编码。
$widhtpx:1280px; //版心   0.69
$widhtpct:70%; //1280/1840 = 0.7 响应式  
@import './sass_mixin.scss';
@import "./header.scss";

main {
    width: $widhtpx;
    margin: 0 auto;

    #banner {
        margin: 30px 0 50px 0;
    }

    .switch {
        margin-bottom: 50px;

        >ul {
            width: 100%;
            height: 68px;
            margin-bottom: 52px;

            li {
                float: left;
                width: 24.9%;
                height: 100%;
                text-align: center;
                background: #f4f4f4;
                line-height: 68px;
                cursor: pointer;
                border: 1px solid #ccc;
                border-width: 1px 0 1px 1px;

                &:last-child {
                    border-width: 1px
                }

                &:hover {
                    background: #fff;
                }

                &:hover a {
                    color: #1b1b1b;
                    border-bottom: 2px solid #378694;
                }

                a {
                    color: #ababab;

                    font-weight: 900;

                }
            }
        }
    }

    .type {
        width: 100%;
        height: 64px;
        margin-bottom: 50px;

        ol {

            height: 100%;

            li {
                width: 16.5%;
                float: left;
                border-left: 1px solid #ccc;
                text-align: center;
                line-height: 64px;
                font-size: 16px;
                cursor: pointer;

                &:last-child {
                    border-right: 1px solid #ccc;
                }

                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }

    .list {
        width: 100%;

        ul {
            width: 100%;
            @include flex-row();
            flex-wrap: wrap;
            justify-content: flex-start;

            li {
                width: 212px;
                height: 421px;
                margin-right: 55px;
                @include flex-col();
                &:nth-child(5n) {
                    margin-right: 0;
                }
                p{
                    margin: 5px 0;
                }
                .activity {
                    width: 100%;
                    margin: 5px 0;

                    >span {
                        display: inline-block;
                        color: #fff;
                        background: red;
                        width: 62px;
                        height: 23px;
                        float: right;
                        text-align: center;
                        line-height: 23px;
                        margin-right: 2px;
                    }
                }

                .bpic {
                    width: 212px;
                    height: 222px;
                }

                .smlpic {
                    margin: 5px 0;

                    >img {
                        width: 18.5px;
                        height: 18.5px;
                        margin: 0 3px;
                    }
                }
                .size{
                    width: 100%;
                }
                h5{
                    line-height: 13px;
                    height: 26px;
                    overflow: hidden;
                    margin-bottom: 5px;
                }
                .price {
                    width: 100%;
                    font-size: 16px;
                    line-height: 16px;
                    font-weight: 600;
                }

                .stars {
                    width: 100%;

                    .appraise {
                        color: #EBBE00;
                    }
                    span:last-child{
                        text-decoration: underline;
                    }
                }
            }
        }

    }
}
.pagelist{
    width: $widhtpx;
    margin: 5px auto;
    height: 50px;
   
}
@import "./footer.scss";